If you're using a web font, you're bound to see a flash of unstyled text (or FOUC),
between the initial render of your websafe font and the webfont that you've chosen.
This usually results in a jarring shift in layout, due to
sizing discrepancies between the two fonts. To minimize this
discrepancy, you can try to match the fallback font and the intended webfont’s
x-heights and widths [1].
This tool helps you do exactly that.
The fox jumped over the lazy dog, the scoundrel.
Download from Google Fonts, or:
The fox jumped over the lazy dog, the scoundrel.
Overlapped
In the default example, Merriweather is taller and wider than Georgia, so if you
bump Georgia's font size up to 18px, and its letter spacing to 0.1px
you'll get a pretty close match!
The fox jumped over the lazy dog, the scoundrel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The fox jumped over the lazy dog, the scoundrel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.